<template>
    <div>
        <div style="padding: 0px 0 ;">
            <el-input v-model="input" style="width:200px;" placeholder="根据宠物名字查找" suffix-icon="el-icon-search"></el-input>
            <el-button style="margin-left: 10px;" type="primary" @click="load">搜索</el-button>
            <el-button type="warning" @click="reset">重置</el-button>
        </div>


        <el-table :data="tableData" style="height: 500px;overflow: auto;">
            <el-table-column prop="image" label="宠物头像" width="180">
                <template slot-scope="{ row }">
                    <el-image style="width: auto; height: 40px; border:none;cursor: pointer;" :src="getImage(row.image)"
                        :preview-src-list="[`http://localhost:8081/common/download?name=${row.image}`]">
                        <div slot="error" class="image-slot">
                            <img src="" style="width: auto; height: 40px; border:none;">
                        </div>
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column prop="petName" label="宠物名称" width="180">
            </el-table-column>
            <el-table-column prop="customerName" label="主人名称" width="180">
            </el-table-column>
            <el-table-column prop="description" label="描述">
            </el-table-column>
            <el-table-column prop="reserveTime" label="预约时间" width="140">
            </el-table-column>
            <el-table-column prop="treateStatus" label="角色" width="120">
                <template slot-scope="scope">
                    <el-tag type="primary" v-if="scope.row.treateStatus === 0">预约</el-tag>
                    <el-tag type="warning" v-if="scope.row.treateStatus === 1">已就诊</el-tag>

                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button :disabled="scope.row.treateStatus !== 0" type="success"
                        @click="handEdit(scope.row)">开始问诊</el-button>

                </template>
            </el-table-column>
        </el-table>
        <div style="padding: 10px 0;">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
                :page-sizes="[3, 6, 9, 12]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
        <!-- 开始问诊窗口弹窗 -->
        <el-dialog style="text-align: center; padding: ;" title="问诊" :visible.sync="dialogFormVisible">
            <el-form :model="form" ref="treatmentForm" :rules="rules" style="text-align: center;">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="宠物名称" label-width="100px">
                            <el-input v-model="form.petName" disabled autocomplete="off" style="width: 230px;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="宠物种类" label-width="100px">
                            <el-input v-model="form.typeName" disabled autocomplete="off" style="width: 230px;"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="主人名称" label-width="100px">
                            <el-input v-model="form.customerName" disabled autocomplete="off"
                                style="width: 230px;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="体重" label-width="100px">
                            <el-input v-model="form.weight + 'kg'" disabled autocomplete="off"
                                style="width: 230px;"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="年龄" label-width="100px">
                            <el-input v-model="form.age + '岁'" disabled autocomplete="off" style="width: 230px;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="描述" label-width="100px">
                            <el-input v-model="form.description" disabled autocomplete="off"
                                style="width: 230px;"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="病情分析" label-width="100px">
                            <el-input v-model="form.diseaseAnalysis" type="textarea" autocomplete="off"
                                style="width: 230px;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="辅助检查" label-width="100px">
                            <el-select @change="auxiliaryCheckChange()" v-model="value1" filterable multiple
                                placeholder="是否需要进行辅助检查" style="width: 230px;" loading-text>
                                <el-option v-for="item in options" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="药方处理" label-width="100px">
                            <el-select :disabled="value1.length != 0" v-model="vaule2" filterable multiple
                                :placeholder="value1.length == 0 ? '请选择处理方式' : '等待检查结果出来后进行药方处理'" style="width: 230px;">
                                <el-option v-for="item in drugSelectList" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="医嘱：" label-width="100px">
                            <el-input v-model="form.doctorTell" type="textarea" autocomplete="off"
                                style="width: 230px;"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelDialog">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </div>

        </el-dialog>
        <el-dialog style="text-align: center;" title="问诊记录" :visible.sync="treatDialogFormVisible">
            <el-form :model="diagnosisForm">
                <el-form-item label="宠物名称" label-width="30px">
                    <el-input v-model="diagnosisForm.petName" disabled autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="主人名称" label-width="30px">
                    <el-input v-model="diagnosisForm.customerName" disabled autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="描述" label-width="30px">
                    <el-input v-model="diagnosisForm.description" disabled autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="病情分析" label-width="30px" prop="diseaseAnalysis">
                    <el-input v-model="diagnosisForm.diseaseAnalysis" disabled autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="治疗方案" label-width="30px">
                    <el-input v-model="diagnosisForm.treatmentPlan" disabled type="textarea" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="treatDialogFormVisible = false">关闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            options: [],
            value1: [],
            vaule2: [],
            tableData: null,
            currentPage4: 4,
            total: 0,
            page: 1,
            pageSize: 6,
            input: '',
            dialogFormVisible: false,
            treatDialogFormVisible: false,
            form: '',
            diagnosisForm: {},
            drugSelectList: [],
            rules: {
                diseaseAnalysis: [
                    { required: true, message: '请输入病情分析', trigger: 'hover' },
                    { min: 2, max: 100, message: '长度在 2 到 100 个字符', trigger: 'blur' }
                ],
            }
        }
    },
    created() {
        this.load();
    },
    methods: {
        getDrugSelect() {
            this.request.get("/drug").then(res => {
                if (res.code == 200) {
                    this.drugSelectList = res.data.map((item) => {
                        return { value: item.drugId, label: item.drugName }
                    })
                }
            })
        },
        cancelDialog() {
            this.dialogFormVisible = false;
            this.imageUrl = '';
            this.value1=[]
            this.vaule2=[]
        },
        getImage(image) {

            return "http://localhost:8081/common/download?name=" + image
        },
        onChange(file) {//校验图片格式
            if (file) {
                const suffix = file.name.split('.')[1]
                const size = file.size / 1024 / 1024 < 2
                if (['png', 'jpeg', 'jpg'].indexOf(suffix) < 0) {
                    this.$message.error('上传图片只支持 png、jpeg、jpg 格式！')
                    this.$refs.upload.clearFiles()
                    return false
                }
                if (!size) {
                    this.$message.error('上传文件大小不能超过 2MB!')
                    return false
                }
                return file
            }
        },
        handleAvatarSuccess(res) {
            this.imageUrl = "http://localhost:8081/common/download?name=" + res.data//图片回显
            this.form.image = res.data
            console.log(this.form.image);
        },
        deleteById(id) {
            this.request.delete(`/user/${id}`).then(res => {
                if (res.code == 200) {
                    this.$message.success('删除成功')
                    this.load()
                } else {
                    this.$message.success('删除失败')
                }
            })
        },
        //辅助检查下拉框数据渲染
        async auxiliaryCheckSelect() {
            await this.request.get("/auxiliary-check/list").then(res => {
                this.options = res.data.map((item) => {
                    return { value: item.id, label: item.checkName }
                })
            })
            console.log("当前option==》", this.options)
        },
        auxiliaryCheckChange() {
            if (this.value1.length != 0) {
                this.vaule2 = []
            }
        },
        save() {//新增提交数据方法
            var diagnosis = {}
            var auxiliaryArr = this.value1.map(item => {
                return item
            })
            var user = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}
            diagnosis.reserveId = this.form.id
            diagnosis.userId = user.id
            diagnosis.petId = this.form.petId
            diagnosis.customerId = this.form.customerId
            diagnosis.diseaseAnalysis = this.form.diseaseAnalysis
            diagnosis.auxiliaryArr = auxiliaryArr
            diagnosis.drugArr = this.vaule2
            diagnosis.doctorTell = this.form.doctorTell
            console.log("auxiliaryArr==>", this.vaule2);
            // this.$refs['treatmentForm'].validate((valid) => {
            //     if (valid) {
            //         console.log(123)
            //     }
            // });
            this.request.post("/diagnosis", diagnosis).then(res => {
                if (res.code == 200) {
                    this.$message.success("问诊成功")
                    this.dialogFormVisible = false
                    this.load();
                } else {
                    this.$message.error("问诊失败")
                }
            })
            this.dialogFormVisible = false
            this.load();
        },
        handEdit(row) {//开始问诊
            this.form = row
            console.log("当前row==>", row)
            this.dialogFormVisible = true
            this.auxiliaryCheckSelect()
        },

        handAdd() {//打开新增窗口
            this.dialogFormVisible = true
            this.form = {}
            this.imageUrl = ''
        },
        reset() {//重置按钮方法
            this.input = "";
            this.load();
        },
        load() {//表格刷新
            var user = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}
            console.log("userid+",user.id,this.page,this.pageSize,this.input)
            this.request.get("/reserve/getReservePage",{
                params:{
                    userId:user.id,
                    page:this.page,
                    pageSize:this.pageSize,
                    name:this.input
                }
            }).then(res => {
                console.log("当前userid====>", res.data)
                this.tableData = res.data.records
                this.total = res.data.total
            })
            this.getDrugSelect()
        },
        handleSizeChange(pageSize) {//分页每页条数
            this.pageSize = pageSize;
            this.load();
        },
        handleCurrentChange(page) {//分页页码选择
            this.page = page;
            this.load();
        },
    }
}
</script>

<style sty>
.warning-row {
    background: oldlace;
}

.success-row {
    background: #f0f9eb;
}

.el-table::before {
    height: 0px;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>